<template>
  <div class="Vac">
    <el-row>
      <!-- 左边折线图开始 -->
      <el-col :span="7">
        <div class="grid-content left">
          <div id="left-top" style="width:24.5vw;height:19vw;"></div>
          <div id="left-bottom" style="width:24.5vw;height:19vw;"></div>
        </div>
      </el-col>
      <!-- 左边折线图结束 -->

      <!-- 中间数据开始 -->
      <el-col :span="10">
        <div class="grid-content mid">
          <!-- 中上三个疫苗数据开始 -->
          <div class="mid-top">
            <h2>全球疫苗接种情况</h2>
            <div class="num">
              <div class="num-box">
                <div style="color:#35c5c8;">1231亿</div>
                <span>累计接种(剂)</span>
              </div>
              <div class="num-box">
                <div style="color:#f31c73;">12313万</div>
                <span>较上日新增(剂)</span>
              </div>
              <div class="num-box">
                <div>123.1</div>
                <span>每百人接种(剂)</span>
              </div>
            </div>
          </div>
          <!-- 中上三个疫苗数据结束 -->
          <div id="mid-bottom" style="width:34.5vw;height:27vw;"></div>
        </div>
      </el-col>
      <!-- 中间数据结束 -->

      <!-- 右边折线图开始 -->
      <el-col :span=" 7">
        <div class="grid-content right">
          <div id="right-top" style="width:24.5vw;height:19vw;"></div>
          <div id="right-bottom" style="width:24.5vw;height:19vw;"></div>
        </div>
      </el-col>
      <!-- 右边折线图结束 -->
    </el-row>
  </div>
</template>

<script>
import { getWorldTrendOfVacAPI, getWorldNumOfVacAPI } from '@/api/index.js'
export default {
  name: 'Vaccination',
  data() {
    return {
      // axios请求回来的数据
      NumOfVacText: {},
      VaccineTrendData: {},
      // 世界地图颜色区间
      pieces: [
        // 配置颜色区间
        {
          min: 0,
          max: 0,
          label: '0剂',
          color: '#FFFFFF'
        },
        {
          min: 1,
          max: 100000,
          label: '1万 - 10万剂',
          color: '#bcf3f3'
        },
        {
          min: 100000,
          max: 1000000,
          label: '10万 - 100万剂',
          color: '#3dd1d1'
        },
        {
          min: 1000000,
          max: 10000000,
          label: '100万 - 1000万剂',
          color: '#39c4c4'
        },
        {
          min: 10000000,
          max: 100000000,
          label: '1000万 - 1亿剂',
          color: '#32abab'
        },
        {
          min: 100000000,
          label: '1亿剂以上',
          color: '#268585'
        }
      ],
      // 世界地图数据
      NumOfVac: [],

      // 柱状图和折现图的y轴
      topaxisLabel: {
        formatter: function(value) {
          const texts = []
          if (value === 0) {
            texts.push(0)
          } else if (value === 500000000) {
            texts.push('5亿')
          } else if (value <= 1000000000) {
            texts.push('10亿')
          } else if (value <= 1500000000) {
            texts.push('15亿')
          } else if (value <= 2000000000) {
            texts.push('20亿')
          } else if (value <= 2500000000) {
            texts.push('25亿')
          } else if (value <= 3000000000) {
            texts.push('30亿')
          } else if (value <= 3500000000) {
            texts.push('35亿')
          }
          return texts
        }
      },
      bottomaxisLabel: { formatter: '{value}' },

      // 左上前十接种数国家
      numTopTen: {
        title: '累计接种剂次前10国家',
        xData: [],
        yData: []
      },
      // 左下前十百人次国家
      numHundredTop: {
        title: '每百人接种剂次前10国家',
        xData: [],
        yData: []
      },
      // 右上中国累计接种趋势
      chinaTrendOfVac: {
        title: '中国累计接种趋势图',
        titleData: ['累计接种'],
        xData: [],
        series: [
          {
            name: '累计接种',
            type: 'line',
            areaStyle: {},
            smooth: true,
            color: '#38d6d8',
            data: []
          }
        ]
      },
      // 右下中国百人接种趋势
      chinaTrendOfHunder: {
        title: '中国每百人接种趋势图',
        titleData: ['累计接种'],
        xData: [],
        series: [
          {
            name: '累计接种',
            type: 'line',
            areaStyle: {},
            smooth: true,
            color: '#20b6ff',
            data: []
          }
        ]
      }
    }
  },
  created() {
    this.getNumOfVac()
    this.getTrendOfVac()
  },
  watch: {
    NumOfVacText: {
      handler() {
        this.worldNumOfVacMsg()
        this.numTopTenMsg()
        this.numHundredTopTenMsg()
      }
    },
    VaccineTrendData: {
      handler() {
        this.chinaTrendOfVacMsg()
        this.chinaTrendOfHunderMsg()
      }
    },

    NumOfVac: {
      handler() {
        // 渲染世界接种地图
        this.setNumOfVac()
      }
    },

    numTopTen: {
      handler() {
        // 渲染接种数前十国家
        this.setNumTopTen()
      },
      deep: true
    },
    numHundredTop: {
      handler() {
        // 渲染百人次接种数前十国家
        this.setNumHundredTopTen()
      },
      deep: true
    },
    chinaTrendOfVac: {
      handler() {
        this.setChinaTrendOfVac()
      },
      deep: true
    },
    chinaTrendOfHunder: {
      handler() {
        this.setChinaTrendOfHunder()
      },
      deep: true
    }
  },
  methods: {
    // 获得中国疫苗接种趋势
    async getTrendOfVac() {
      const { data: res } = await getWorldTrendOfVacAPI()
      this.VaccineTrendData = res.data.VaccineTrendData
    },

    // 用axios获得全世界疫苗接种数和百人比
    async getNumOfVac() {
      const { data: res } = await getWorldNumOfVacAPI()
      this.NumOfVacText = res.data.VaccineSituationData
    },

    // 获取全世界国家接种次数
    worldNumOfVacMsg() {
      for (let i = 0; i < this.NumOfVacText.length; i++) {
        const obj = {}
        obj.name = this.NumOfVacText[i].country
        obj.value = this.NumOfVacText[i].total_vaccinations
        this.NumOfVac.push(obj)
      }
    },
    // 将疫苗接种数渲染到map上
    setNumOfVac() {
      const title = '累计接种人数'
      this.$myChart.getWorldMap('mid-bottom', this.NumOfVac, title, this.pieces)
    },

    // 获取接种数前十国家
    numTopTenMsg() {
      for (let i = 0; i < 10; i++) {
        this.numTopTen.xData.push(this.NumOfVacText[i].country)
        this.numTopTen.yData.push(this.NumOfVacText[i].total_vaccinations)
      }
    },
    // 将接种数前十个国家渲染到左上角
    setNumTopTen() {
      this.$myChart.getBar('left-top', this.numTopTen, this.topaxisLabel)
    },

    // 获取百人次接种数前十国家
    numHundredTopTenMsg() {
      const temp = []
      for (let i = 0; i < this.NumOfVacText.length; i++) {
        temp.push(this.NumOfVacText[i])
      }
      temp.sort(function(a, b) {
        return b.total_vaccinations_per_hundred - a.total_vaccinations_per_hundred
      })
      for (let i = 0; i < 10; i++) {
        this.numHundredTop.xData.push(temp[i].country)
        this.numHundredTop.yData.push(temp[i].total_vaccinations_per_hundred)
      }
    },
    // 将百人次接种数前十国家渲染到左下角
    setNumHundredTopTen() {
      this.$myChart.getBar('left-bottom', this.numHundredTop, this.bottomaxisLabel)
    },

    // 获取中国累计接种趋势
    chinaTrendOfVacMsg() {
      for (let i = 0; i < this.VaccineTrendData.totalTrend.中国.length; i++) {
        this.chinaTrendOfVac.xData.push(this.VaccineTrendData.totalTrend.中国[i].date)
        this.chinaTrendOfVac.series[0].data.push(this.VaccineTrendData.totalTrend.中国[i].total_vaccinations)
        console.log(i)
      }
    },
    // 将中国累计接种趋势渲染到右上
    setChinaTrendOfVac() {
      this.$myChart.getLine('right-top', this.chinaTrendOfVac, this.topaxisLabel)
    },

    // 获取中国百人接种趋势
    chinaTrendOfHunderMsg() {
      for (let i = 0; i < this.VaccineTrendData.perHundredTrend.中国.length; i++) {
        this.chinaTrendOfHunder.xData.push(this.VaccineTrendData.perHundredTrend.中国[i].date)
        this.chinaTrendOfHunder.series[0].data.push(this.VaccineTrendData.perHundredTrend.中国[i].total_vaccinations_per_hundred)
        console.log(i)
      }
    },
    // 将中国百人接种趋势渲染到右下
    setChinaTrendOfHunder() {
      this.$myChart.getLine('right-bottom', this.chinaTrendOfHunder, this.bottomaxisLabel)
    }
  }
}
</script>

<style lang="css" scoped>
@import '@/assets/css/vaccination';
</style>
